<template>
  <div class="quick-login">
    <div class="content">
      <div class="login-box">
        <p class="title">快捷登录</p>
        <form>
          <input
            name="phoneNumber"
            v-model="phoneNumber"
            id="phoneNumber"
            type="text"
            class="username"
            placeholder="手机号"
          />
          <input
            name="phoneTokenName"
            v-model="phoneTokenName"
            id="phoneTokenName"
            type="text"
            class="token"
            placeholder="手机验证码"
          />
          <input
            type="button"
            v-bind:class="{'phone-button-disabled': this.phoneButtonDisabled, 'phone-button-enabled': !this.phoneButtonDisabled}"
            class="get_token_btn"
            @click="getPhoneToken(this)"
            :disabled="phoneButtonDisabled"
            :value="phoneButtonValue"
          />
          <input
            name="resubmitTokenName"
            v-model="resubmitTokenName"
            id="resubmitTokenName"
            type="hidden"
          />
          <input
            type="text"
            name="imageTokenName"
            v-model="imageTokenName"
            class="token"
            placeholder="图形验证码"
          />
          &nbsp;
          <img
            id="codeImg"
            :src="tokenImgSrc"
            @click="changeImg"
            style="margin-bottom: -10px;"
          />&nbsp;
          <a href="javascript:void(0);" @click="changeImg" style="text-decoration:none;">看不清</a>
          <br />
          <el-button type="primary" @click="quickLogin()" class="login_btn">立刻登录</el-button>
        </form>
        <div>
          <div class="div_b">
            <a>
              <router-link :to="{name: 'login'}">
                <img src="../assets/images/Login.png" />
              </router-link>
            </a>
            <br />账号登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "quickLogin",
  // 监听enter键， 登录
  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
  methods: {
    changeImg: function() {
      this.imageTokenName = "";
      this.tokenImgSrc =
        this.GlobalConstants.BASE_URL +
        "token/getImageToken?x=" +
        Math.floor(Math.random() * 100);
    },
    getPhoneToken: function() {
      if (this.phoneButtonDisabled) {
        return;
      }

      this.setTimeoutForGetToken(60);

      this.$api.token
        .getResubmitToken(Math.floor(Math.random() * 100))
        .then(resubmitRes => {
          if (!resubmitRes) {
            return;
          }

          this.resubmitTokenName = resubmitRes.body.token;

          this.$api.token.getPhoneToken(this.phoneNumber).then(res => {
            if (!res) {
              return;
            }

            this.$message({
              type: "success",
              message: "短信验证码发送成功，请注意查收！"
            });
          });
        });
    },
    setTimeoutForGetToken: function(delay) {
      let _this = this;
      let _delay = delay;
      if (delay == 0) {
        this.phoneButtonDisabled = false;
        this.phoneButtonValue = "获取";
        delay = _delay;
      } else {
        this.phoneButtonDisabled = true;
        this.phoneButtonValue = delay + "s";
        delay--;
        setTimeout(function() {
          _this.setTimeoutForGetToken(delay);
        }, 1000);
      }
    },
    quickLogin: function() {
      this.$api.login
        .quickLogin({
          phoneNumber: this.phoneNumber,
          resubmitTokenName: this.resubmitTokenName,
          phoneTokenName: this.phoneTokenName,
          imageTokenName: this.imageTokenName
        })
        // 成功返回 -- status:200, 非000000返回码皆在response拦截器处理掉
        .then(res => {
          if (!res) {
            this.changeImg();
            return;
          }

          let body = res.body;

          localStorage.setItem("user.name", body.username);
          localStorage.setItem("user.menus", JSON.stringify(body.menus));

          // 正确逻辑处理
          this.$router.push("/welcome");
        });
    },

    enterKey(event) {
      const componentName = this.$options.name;
      if (componentName == "quickLogin") {
        const code = event.keyCode
          ? event.keyCode
          : event.which
          ? event.which
          : event.charCode;
        if (code == 13) {
          this.quickLogin();
        }
      }
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    }
  },
  data() {
    return {
      tokenImgSrc: this.GlobalConstants.BASE_URL + "token/getImageToken",
      imageTokenName: "",
      resubmitTokenName: "",
      phoneTokenName: "",
      phoneNumber: "",
      phoneButtonValue: "获取",
      phoneButtonDisabled: false
    };
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

*:focus {
  outline: none;
}

.quick-login {
  height: 800px;
  width: 100%;
  /* position: absolute; */
  z-index: 2;
  background-color: aquam、arine;
  position: fixed;
}

.quick-login .content {
  background-image: url(../assets/images/pic.png);
  background-repeat: no-repeat;
  background-position: 80px center;
  height: 400px;
  margin-top: 150px;
}

.quick-login .content .login-box {
  background-color: #3f1675;
  float: right;
  height: 400px;
  width: 380px;
  border-radius: 3px;
  margin-top: 24px;
  margin-right: 100px;
}

.quick-login .content .login-box .title {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 28px;
  line-height: 90px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100%;
}

.quick-login .content .login-box .username {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/user.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.quick-login .content .login-box .password {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/Key.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.quick-login .content .login-box .get_token_btn {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  width: 80px;
  height: 32px;
  border: 1px solid #fff;
  border-radius: 8px;
  margin-left: 15px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 10px;
  text-decoration: none;
}

.quick-login .content .login-box .token {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-image: url(../assets/images/Token.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  width: 108px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: 70px;
  margin-right: auto;
  margin-bottom: 20px;
}

.quick-login .content .login-box .label {
  font-family: "Microsoft Sans Serif", Arial;
  margin-top: 5px;
  margin-left: 72px;
  width: 300px;
  display: block;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.quick-login .content .login-box .login_btn {
  width: 238px;
  height: 39px;
  border: 0.5px solid #fff;
  margin-left: 70px;
  margin-top: -5px;
}

a {
  color: rgb(101, 192, 196);
  text-decoration: underline;
}

.div_b {
  text-align: center;
  margin-top: 20px;
  /* margin-left: 20px; */
  margin-bottom: 20px;
  float: center;
  font-size: 10px;
  color: #fff;
}

.phone-button-disabled {
  background-color: grey;
  cursor: not-allowed;
}

.phone-button-enabled {
  background-color: #409eff;
  cursor: pointer;
}
</style>
